import React, { Component } from 'react'
import { Card, Button, Table, Form, Select, Modal, Radio, message } from 'antd'
import Utils from '../../utils/Utils'
import Axios from '../../axios'
import BaseForm from '../../components/BaseForm'
import ETable from '../../components/ETable'
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

class Order extends Component {
    state = {
        orderInfo: {},
        list: [],
        closeOrderVisible: false
    }
    params = {
        page: 1
    }
    componentDidMount() {
        this.requestList()
    }
    filterSubmit =(params) =>{
        this.params = params;
        this.requestList()
    }
    handleOk=()=>{
        let item = this.state.selectedRows;
        Axios.ajax({
            url: '/order/finish_order',
            data: {
                params: {
                    orderId: item.id
                }
            }
        }).then((res) => {
            if (res.code == 0) {
                message.success("订单结束成功")
                this.setState({
                    closeOrderVisible: false
                })
                this.requestList()
            }
        })
    }
    handleCancel=()=>{
        this.setState({
            closeOrderVisible: false,
        });
    }
    //订单详情
    openOrderDetail = () => {
        let item = this.state.selectedRows;
        if(!item){
            Modal.info({
                title: '提示',
                content: '请选中一条信息'
            })
            return;
        }
        window.open(`/#/common/order/detail/${item[0].id}`,'_blank')
    }

    handleConfirm = () => {
        let item = this.state.selectedRows;
        if(!item){
            Modal.info({
                title:'信息',
                content: '请选中一条信息'
            })
            return ;
        }
        Axios.ajax({
            url: '/order/ebike_info',
            data: {
                params: {
                    orderId: item[0].id
                }
            }
        }).then((res) => {
            if (res.code == 0) {
                this.setState({
                    closeOrderVisible: true,
                    orderInfo: res.result
                });
            }
        })
    }   

    requestList = () => {
        let _this = this
        Axios.ajax({
            url: '/open_city',
            data: {
                params: {
                    page: this.params.page
                }
            }
        }).then(res => {
            if (res.code == '0') {
                this.setState({
                    list: res.result.item_list,
                    pagination: Utils.pagination(res, (current => {
                        _this.params.page = current
                        this.requestList();
                    }))
                })
            }
        })
    }
    render() {
        const formList = [
            {
                type: 'SELECT',
                label: '城市',
                field: 'city',
                placeholder: '全部',
                initialValue: '0',
                width: 100,
                list: [
                    {
                        id: '0',
                        name: '全部'
                    },
                    {
                        id: '1',
                        name: '南京'
                    },
                    {
                        id: '2',
                        name: '天界'
                    },
                    {
                        id: '3',
                        name: '上海'
                    }
                ]
            },
            {
                type: '时间查询'
            },
            {
                type: 'SELECT',
                label: '订单查询',
                field: 'order_status',
                placeholder: '全部',
                initialValue: '1',
                width: 100,
                list: [
                    {
                        id: '0',
                        name: '全部'
                    },
                    {
                        id: '1',
                        name: '进行中'
                    },
                    {
                        id: '2',
                        name: '结束行程'
                    }
                ]
            }
        ]
        const columns = [{
            title: '城市ID',
            dataIndex: 'id',
            key: 'id',
        }, {
            title: '城市名称',
            dataIndex: 'name',
            key: 'name',
        }, {
            title: '用车模式',
            dataIndex: 'mode',
            key: 'mode',
            render(mode) {
                return (mode == '1' ? '停车点' : '禁停区')
            }
        },
        {
            title: '营运模式',
            dataIndex: 'op_mode',
            key: 'op_mode',
            render(op_mode) {
                return (op_mode == '1' ? '自营' : '加盟')
            }
        }, {
            title: '授权加盟商',
            dataIndex: 'franchisee_name'
        }, {
            title: '城市管理员',
            dataIndex: 'city_admins',
            render(arr) {
                return arr.map((item) => {
                    return item.user_name;
                }).join(',');
            }
        }, {
            title: '城市开通时间',
            dataIndex: 'open_time'
        }, {
            title: '操作时间',
            dataIndex: 'update_time',
            render: Utils.formateDate
        }, {
            title: '操作人',
            dataIndex: 'sys_user_name'
        }]
        const formItemLayout = {
            labelCol: {
                xs: { span: 24 },
                sm: { span: 8 },
            },
            wrapperCol: {
                xs: { span: 24 },
                sm: { span: 16 },
            },
        };
        return (
            <div>
                <Card>
                    <BaseForm formList={formList} filterSubmit={this.filterSubmit} />
                </Card>
                <Card>
                    <Button type="primary" onClick={this.openOrderDetail}>订单详情</Button>
                    <Button type="primary" onClick={this.handleConfirm}>结束订单</Button>
                </Card>
                <Card>
                    <div>
                        <ETable
                            updataSelectedItem = { Utils.updataSelectedItem.bind(this) }
                            columns={columns}
                            dataSource={this.state.list}
                            rowSelection="radio"
                        />
                    </div>
                    <Modal
                        title="结束订单！"
                        visible={this.state.closeOrderVisible}
                        onOk={this.handleOk}
                        onCancel={() => {
                            this.setState({
                                closeOrderVisible: false
                            })
                        }}
                    >
                        <Form layout="horizontal">
                            <FormItem label="车辆编号" {...formItemLayout}>
                                {this.state.orderInfo.bike_sn}
                            </FormItem>
                             <FormItem label="剩余电量" {...formItemLayout}>
                                {this.state.orderInfo.battery + '%'}
                            </FormItem>
                            <FormItem label="行程开始时间" {...formItemLayout}>
                                {this.state.orderInfo.start_time}
                            </FormItem>
                            <FormItem label="当前位置" {...formItemLayout}>
                                {this.state.orderInfo.location}
                            </FormItem> 
                        </Form>
                    </Modal>
                </Card>
            </div>

        )
    }
}
export default Order;

